<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams" @handle-search="getList">
      <el-form :model="searchForm" inline>
        <el-form-item label="시간선택">
          <MyCombinePiker :dateTimeRange="_dateTimeRange" @changeHandle="timePickChangeHandle" />
        </el-form-item>
        <el-form-item label="검색조건">
          <el-select v-model="searchSelectValue" placeholder="전체" clearable class="w-220px" @change="fkSelectHandle">
            <!-- <el-option label="로얄회원ID" value="agent_player_name" />
            <el-option label="로얄회원" value="agent_player_lv" />
            <el-option label="회원번호" value="agent_player_id" />
            <el-option label="전화번호" value="phone_number" />
             -->

            <!-- 로얄회원ID    会员id
            회원등급       会员等级
            회원번호        会员号码
            휴대폰번호     电话号码 -->

            <el-option label="로얄회원ID" value="agent_player_name" />
            <el-option label="회원등급" value="agent_player_lv" />
            <el-option label="회원번호" value="agent_player_id" />
            <el-option label="전화번호" value="phone_number" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-if="searchSelectValue == 'agent_player_name'" v-model="searchForm.agent_player_name"
            placeholder="ID를 입력하세요" />
          <el-input v-if="searchSelectValue == 'agent_player_lv'" v-model="searchForm.agent_player_lv"
            placeholder="회원등급" />
          <el-input v-if="searchSelectValue == 'agent_player_id'" v-model="searchForm.agent_player_id"
            placeholder="회원번호" />
          <el-input v-if="searchSelectValue == 'phone_number'" v-model="searchForm.phone_number" placeholder="전화번호" />
        </el-form-item>
      </el-form>
    </SearchForm>
    <div class="page-card h-full m-table-position" v-loading="loading">
      <div class="m-withdraw-amount-sum">
        <span>기간내입금액:</span>
        <el-tag :type="rechargeAmountSum > 0 ? 'danger' : 'success'">
          {{ formatNumber(rechargeAmountSum) }}
        </el-tag>

        <span>기간내출금액:</span>
        <el-tag :type="withdrawAmountSum > 0 ? 'danger' : 'success'">
          {{ formatNumber(withdrawAmountSum) }}
        </el-tag>
      </div>

      <MyTable :tableData="tableData" :tableColumn="tableColumn" v-slot="sp" style="width: 100%">
        <el-table :data="tableData" :highlight-current-row="true">
          <el-table-column v-if="sp.ctc.includes('ID')" label="ID" prop="player_id" align="center" width="120" sortable />
          <el-table-column v-if="sp.ctc.includes('로얄회원번호')" label="로얄회원번호" prop="agent_player_id" align="center"
            width="140" sortable />
          <el-table-column v-if="sp.ctc.includes('로얄회원ID')" label="로얄회원ID" prop="agent_player_name" align="center"
            width="140" sortable />
          <el-table-column v-if="sp.ctc.includes('회원등급')" label="회원등급" prop="agent_player_lv" align="center" width="120"
            sortable />
          <el-table-column v-if="sp.ctc.includes('등급명')" label="등급명" prop="agent_player_lv_value" align="center"
            width="120" sortable />
          <el-table-column v-if="sp.ctc.includes('휴대폰번호')" label="휴대폰번호" prop="phone_number" align="center" width="120"
            sortable />

          <el-table-column v-if="sp.ctc.includes('기간내입금액')" label="기간내입금액" align="center" prop="recharge_sum" sortable
            width="140">
            <template #default="{ row }">
              {{ formatNumber(row.recharge_sum) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('기간내입금횟수')" label="기간내입금횟수" prop="recharge_cnt" align="center"
            width="160" sortable>
            <template #default="{ row }">
              {{ formatNumber(row.recharge_cnt) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('기간내입금일수')" label="기간내입금일수" prop="recharge_date_cnt" align="center"
            width="160" sortable>
            <template #default="{ row }">
              {{ formatNumber(row.recharge_date_cnt) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('기간내출금액')" label="기간내출금액" align="center" prop="withdraw_sum" sortable
            width="140">
            <template #default="{ row }">
              {{ formatNumber(row.withdraw_sum) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('기간내출금횟수')" label="기간내출금횟수" prop="withdraw_cnt" align="center"
            width="160" sortable />

          <el-table-column v-if="sp.ctc.includes('롤링 보너스 금액')" label="롤링 보너스 금액" prop="rolling_bonus_remaining_amount"
            align="center" width="170" sortable />
          <el-table-column v-if="sp.ctc.includes('최종 쿠폰 사용일')" label="최종 쿠폰 사용일" prop="final_deposit_ts" align="center"
            width="170" sortable />
          <el-table-column v-if="sp.ctc.includes('최종 입금일')" label="최종 입금일" prop="final_coupon_use_ts" align="center"
            width="170" sortable />

        </el-table>
        <Pagination v-model:page-size="myPageSize" :pageable="page" :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange" :page-sizes="myPageSizes" />
      </MyTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { playerStatsApi } from '@/api/statistic/index';
import { formatNumber, dataTimeRangeCurTwo, dateTransToSeoulTime, timestampToSeoul } from '@/utils/util';
import { levelMap } from '@/utils/gameUtil';
import MyTable from '@/components/MyTable';
import { useMyDateRange } from '@/hooks/useMyDateRange';
import MyCombinePiker from '@/components/MyCombinePiker';

const tableColumn = ref([
  'ID',
  '로얄회원번호',
  '로얄회원ID',
  '회원등급',
  '등급명',
  '휴대폰번호',
  '기간내입금액',
  '기간내입금횟수',
  '기간내입금일수',
  '기간내출금액',
  '기간내출금횟수',
  '롤링 보너스 금액',
  '최종 쿠폰 사용일',
  '최종 입금일',
]);

const _dateTimeRange = dataTimeRangeCurTwo(-6);

const searchForm = reactive({
  agent_player_lv: '',
  agent_player_name: '',
  agent_player_id: '',
  phone_number: '',
  start_ts: dateTransToSeoulTime(_dateTimeRange[0]),
  end_ts: dateTransToSeoulTime(_dateTimeRange[1])
});

const fkSelectHandle = (val: string) => {
  searchForm.agent_player_lv = '';
  searchForm.agent_player_name = '';
  searchForm.agent_player_id = '';
  searchForm.phone_number = '';
};

const timePickChangeHandle = (timestamp: number, type: string) => {
  searchForm[type] = timestamp;
};

const searchSelectValue = ref('agent_player_name');

const rechargeAmountSum = ref(0);
const withdrawAmountSum = ref(0);

const dataCallBack = (data: any) => {
  const _data = data.data;
  let _list = _data.players;

  let _rechargeAmountSum = 0;
  let _withdrawAmountSum = 0;

  _list = _list.map((item: any) => {
    _rechargeAmountSum += item.recharge_sum;
    _withdrawAmountSum += item.withdraw_sum;

    const _itemFilter = levelMap.filter((levelItem: any) => levelItem.id == item.agent_player_lv);
    item.agent_player_lv_value = _itemFilter[0] ? _itemFilter[0]['value'] : '';

    if (item.final_coupon_use_ts) {
      item.final_coupon_use_ts = timestampToSeoul(item.final_coupon_use_ts * 1000, 'Y-m-d H:i:s', 1);
    } else {
      item.final_coupon_use_ts = '';
    }

    if (item.final_deposit_ts) {
      item.final_deposit_ts = timestampToSeoul(item.final_deposit_ts * 1000, 'Y-m-d H:i:s', 1);
    } else {
      item.final_deposit_ts = '';
    }

    return item;
  });

  rechargeAmountSum.value = _rechargeAmountSum;
  withdrawAmountSum.value = _withdrawAmountSum;

  return {
    list: _list,
    total: _data.total_count
  };
};

const myPageSize = ref(1000);
const myPageSizes = [1000, 1100, 1200, 1300];

const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: playerStatsApi,
    params: searchForm,
    callback: dataCallBack,
    pageSize: 1000,
    pageSizes: myPageSizes
  });
</script>

<style lang="scss" scoped>
.m-table-position {
  position: relative;
}

.m-withdraw-amount-sum {
  position: absolute;
  bottom: 0;
  left: 1.25rem;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.m-withdraw-amount-sum span {
  margin-right: 10px;
}
</style>
